<template>
    <el-container style="height: 100%;">
        <!-- 左侧工作区 -->
        <div class="sidebar-wrapper" :style="{ width: sidebarWidth + 'px' }">
            <sidebar :workspaces="workspaces" :activeThreadSlug="activeThreadSlug" @thread-select="handleThreadSelect"
                @workspace-create="createWorkspace" @change="handleChange" @setting="settingClick" />

            <!-- 可调节宽度的拖动条 -->
            <div class="resize-bar" @mousedown="startResize"></div>
        </div>

        <!-- 右侧问答区域 -->
        <el-container style="flex: 1;">
            <chat-area v-if="!showSetting" :currentThread="currentThread"
                :currentWorkspaceSlug="currentWorkspaceSlug" />
            <Setting v-else @back="backToChat"  @refresh="fetchWorkspaces"
            :workspace="selectedWorkspace" 
            @workspaceChange="settingClick"/>
        </el-container>
        <!-- 新增工作区弹窗 -->
        <new-workspace-dialog :visible="showWorkspaceDialog" @close="closeWorkspaceDialog"
            @create="handleCreateWorkspace" />
    </el-container>
</template>

<script>
import Sidebar from './sidebar.vue';
import ChatArea from './chatArea.vue';
import NewWorkspaceDialog from './NewWorkspaceDialog.vue';
import Setting from './setting.vue'
import { workspacesApi } from '../../api/aigc/index';

export default {
    components: {
        Sidebar,
        ChatArea,
        NewWorkspaceDialog,
        Setting
    },
    data() {
        return {
            workspaces: [],  // 工作区数据
            activeThreadSlug: null,  // 当前选中的子线程的 slug
            showWorkspaceDialog: false,
            sidebarWidth: 250,  // 默认宽度
            isResizing: false,  // 拖动标志
            startX: 0,  // 鼠标初始位置
            currentWorkspaceSlug: null,
            showSetting: false,
            selectedWorkspace: null,
        };
    },
    computed: {
        // 根据 activeThreadSlug 获取当前子线程
        currentThread() {
            for (let workspace of this.workspaces) {
                const thread = workspace.threads.find(thread => thread.slug === this.activeThreadSlug);
                if (thread) return thread;
            }
            return {};  // 如果没有找到线程，返回空对象
        }
    },
    methods: {
        async fetchWorkspaces() {
            try {
                const response = await workspacesApi.getWorkspaces();
                this.workspaces = response.workspaces;
            } catch (error) {
                console.error("Error fetching workspaces:", error);
            }
        },

        handleThreadSelect(threadSlug) {
            // 选择子线程时更新 activeThreadSlug
            this.activeThreadSlug = threadSlug;
        },

        createWorkspace() {
            this.showWorkspaceDialog = true;
        },

        async handleCreateWorkspace(name) {
            const workspaceData = {
                name,
                similarityThreshold: 0.25,
                openAiTemp: null,
                openAiHistory: 20,
                openAiPrompt: null,
                chatMode: 'chat',
                topN: 4
            };
            try {
                const response = await workspacesApi.createWorkspace(workspaceData);
                this.workspaces.push(response.workspace);
                this.showWorkspaceDialog = false;
                // 默认选中第一个子线程
                this.activeThreadSlug = response.workspace.threads[0].slug;
            } catch (error) {
                console.error("Error creating workspace:", error);
            }
        },

        closeWorkspaceDialog() {
            this.showWorkspaceDialog = false;
        },

        closeThreadDialog() {
            this.showThreadDialog = false;
        },

        // 拖动条事件
        startResize(e) {
            this.isResizing = true;
            this.startX = e.clientX;
            document.addEventListener('mousemove', this.resizeSidebar);
            document.addEventListener('mouseup', this.stopResize);
        },
        resizeSidebar(e) {
            if (this.isResizing) {
                const diff = e.clientX - this.startX;
                this.sidebarWidth = Math.max(150, this.sidebarWidth + diff);
                this.startX = e.clientX;
            }
        },
        stopResize() {
            this.isResizing = false;
            document.removeEventListener('mousemove', this.resizeSidebar);
            document.removeEventListener('mouseup', this.stopResize);
        },
        handleChange(val) {
            if (String(val).length>0) {
                // 获取选中的工作区并更新默认选中的线程
                const workspace = this.workspaces[val];
                this.currentWorkspaceSlug = workspace.slug;  // 更新当前工作区的 slug
            }
        },
        async settingClick(workspace) {
            try {
                const response = await workspacesApi.getWorkspaceInfo(workspace.slug);
                this.selectedWorkspace = response.workspace[0];
            } catch (error) {
                console.error("工作台指定slug请求失败", error);
            }
            this.showSetting = true; // 显示设置页面
        },
        backToChat() {
            this.showSetting = false; // 返回聊天页面
        }
    },
    mounted() {
        this.fetchWorkspaces();
    }
};
</script>




<style scoped>
/* 侧边栏容器样式 */
.sidebar-wrapper {
    display: flex;
    position: relative;
    height: 100%;
}

/* 拖动条样式 */
.resize-bar {
    width: 2px;
    background-color: #ECF5FF;
    cursor: ew-resize;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
}

/* 右侧内容区域 */
.el-container {
    display: flex;
}

/* 侧边栏菜单项 */
.el-menu-item {
    height: 45px;
    line-height: 45px;
}

.el-menu-item.is-active {
    border: 1px solid #409EFF;
    border-radius: 5px;
    background-color: #ECF5FF;
}

body {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #f0f2f5;
}


.menuItem {
    color: black;
    border-radius: 10px;
    height: 43px;
    line-height: 43px;
    padding: 0px !important;
    display: flex;
    justify-content: space-between;
    align-content: center;
    margin-bottom: 5px;
}


/* 聊天内容区域 */
.messagesBox {
    flex: 1;
    overflow-y: auto;
    padding: 0px 50px;
}

/* 聊天消息气泡 */
.userItemBox {
    background-color: #e9e9e980;
    border-radius: 20px;
    display: inline-block;
    max-width: 70%;
}

.aiItemBox {
    margin: 20px 0px;
}

.itemBox {
    margin: 0px 50px;
}

.itemBox>div {
    display: flex;
    min-width: 500px;
}

/* 输入区域 */
.inputBox {
    padding: 0px 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.inputMainBox {
    margin: 0px 50px;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* textarea外壳 */
.textareaWrapper {
    position: relative;
    width: 100%;
    border-radius: 30px;
    border: 1px solid #ddd;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    padding: 10px;
    margin-bottom: 5px;
}

.chatTextarea {
    width: 100%;
    min-height: 30px;
    max-height: 200px;
    padding: 5px 0px 7px 5px;
    border: none;
    border-radius: 8px;
    resize: none;
    overflow-y: auto;
    font-size: 16px;
    outline: none;
    line-height: 1.5;
    letter-spacing: 0em;
    color: #1a1a1a;
    transition: height 0.2s ease;
    /* ✨ 加平滑过渡 */
}

.chatTextarea {
    transition: height 0.2s ease;
    /* ✨ 加平滑过渡动画 */
}

/* 发送按钮样式 */
.sendButton {
    background-color: black;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sendButton:hover {
    background-color: #333;
}

.chatTool {
    display: flex;
    justify-content: flex-end;
}

.home .el-aside {
    line-height: 0px;
}

.thinkingLine {
    font-size: 13px;
    color: #888;
    font-style: italic;
    white-space: pre-wrap;
}

.answerLine {
    font-size: 16px;
    color: #333;
    white-space: pre-wrap;
    line-height: 1.6;
    margin-top: 10px;
}
</style>